<template>
	<view class="content">
		<view class="nav-items">
			<view class="nav-boxs" @tap="itemChange(1)" :class="defaultChoice == 1 ? 'nav-boxs-active' : ''">未使用<view v-if="defaultChoice == 1"></view>
			</view>
			<view class="nav-boxs" @tap="itemChange(2)" :class="defaultChoice == 2 ? 'nav-boxs-active' : ''">使用记录<view v-if="defaultChoice == 2"></view>
			</view>
			<view class="nav-boxs" @tap="itemChange(3)" :class="defaultChoice == 3 ? 'nav-boxs-active' : ''">已过期<view v-if="defaultChoice == 3"></view>
			</view>
		</view>
		<view class="youhui-list" v-if="defaultChoice==1">
			<view v-for="(item,index) in list" :key="index">
				<view class="youhui-items" @tap="showInfos(index)">
					<view class="youhui-items-l">
						<view class="youhui-items-price"><a>￥</a>{{item.price}}</view>
						<view class="youhui-items-text">满299元可用</view>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_blue%402x.png" class="youhui-items-bg"></image>
					</view>
					<view class="youhui-items-r">
						<view class="youhui-items-name"><span :class="defaultChoice == 2 ? 'youhui-items-name-spanTwo' : ''">品牌券</span>仅可购买童车童床安全椅</view>
						<view class="youhui-items-date">2019.01.16-2019.01.16</view>
						<view class="youhui-items-use" v-if="defaultChoice == 1">立即使用</view>
						<view class="youhui-items-detail">详细信息</view>
						<image class="youhui-items-img-down" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_down%402x.png"
						 :class="index == infoShow ? 'hide':''"></image>
						<image class="youhui-items-img-down" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_up%402x.png"
						 :class="index != infoShow ? 'hide':''"></image>
					</view>
				</view>
				<view class="youhui-items-detail-infos" :class="index == infoShow ? 'show':''">
					满减说明：满299元减80元</br>
					限品类：仅可购买现代九草部分商品
				</view>
			</view>
		</view>

		<view class="youhui-list" v-if="defaultChoice==2">
			<view v-for="(item,index) in list" :key="index">
				<view class="youhui-items" @tap="showInfos(index)">
					<view class="youhui-items-l">
						<view class="youhui-items-price"><a>￥</a>{{item.price}}</view>
						<view class="youhui-items-text">满299元可用</view>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_blue%402x.png" v-if="defaultChoice == 1"
						 class="youhui-items-bg"></image>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_gray%402x.png" v-if="defaultChoice == 2"
						 class="youhui-items-bg"></image>
					</view>
					<view class="youhui-items-r">
						<view class="youhui-items-name"><span :class="defaultChoice == 2 ? 'youhui-items-name-spanTwo' : ''">品牌券</span>仅可购买童车童床安全椅</view>
						<view class="youhui-items-date">2019.01.16-2019.01.16</view>
						<view class="youhui-items-use" v-if="defaultChoice == 1">立即使用</view>
						<image class="youhui-items-used-img" v-if="defaultChoice==2" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_beenuse%402x.png"></image>
						<view class="youhui-items-detail">详细信息</view>
						<image class="youhui-items-img-down" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_down%402x.png"
						 :class="index == infoShow ? 'hide':''"></image>
						<image class="youhui-items-img-down" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_up%402x.png"
						 :class="index != infoShow ? 'hide':''"></image>
					</view>
				</view>
				<view class="youhui-items-detail-infos" :class="index == infoShow ? 'show':''">
					满减说明：满299元减80元</br>
					限品类：仅可购买现代九草部分商品
				</view>
			</view>
		</view>

		<view class="youhui-list" v-if="defaultChoice==3">
			<view v-for="(item,index) in list" :key="index">
				<view class="youhui-items" @tap="showInfos(index)">
					<view class="youhui-items-l">
						<view class="youhui-items-price"><a>￥</a>{{item.price}}</view>
						<view class="youhui-items-text">满299元可用</view>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_blue%402x.png" v-if="defaultChoice == 1"
						 class="youhui-items-bg"></image>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_gray%402x.png" v-if="defaultChoice != 1"
						 class="youhui-items-bg"></image>
					</view>
					<view class="youhui-items-r">
						<view class="youhui-items-name"><span :class="defaultChoice == 3 ? 'youhui-items-name-spanTwo' : ''">品牌券</span>仅可购买童车童床安全椅</view>
						<view class="youhui-items-date">2019.01.16-2019.01.16</view>
						<view class="youhui-items-use" v-if="defaultChoice == 1">立即使用</view>
						<image class="youhui-items-used-img" v-if="defaultChoice==2" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_beenuse%402x.png"></image>
						<view class="youhui-items-detail">详细信息</view>
						<image class="youhui-items-img-down" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_down%402x.png"
						 :class="index == infoShow ? 'hide':''"></image>
						<image class="youhui-items-img-down" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/quan_up%402x.png"
						 :class="index != infoShow ? 'hide':''"></image>
					</view>
				</view>
				<view class="youhui-items-detail-infos" :class="index == infoShow ? 'show':''">
					满减说明：满299元减80元</br>
					限品类：仅可购买现代九草部分商品
				</view>
			</view>
		</view>

		<view class="bottom-text">
			<view class="bottom-text-l"></view>
			<view class="bottom-text-m">以上是{{text}}的优惠券</view>
			<view class="bottom-text-r"></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				defaultChoice: 1,
				list: [{
					price: 80
				}, {
					price: 90
				}, {
					price: 40
				}],
				infoShow: -1,
				text: '未使用'
			}
		},
		onLoad() {

		},
		methods: {
			itemChange(index) {
				this.defaultChoice = index;
				if (index == 1) {
					this.text = '未使用'
				}else if(index == 2){
					this.text = '已使用'
				}else if(index == 3) {
					this.text = '已过期'
				}
			},
			showInfos(index) {
				if (this.infoShow != index) {
					this.infoShow = index
				} else {
					this.infoShow = -1
				}
			}
		}
	}
</script>

<style>
	page {
		background: rgba(255, 255, 255, 1);
	}

	.bottom-text {
		height: 16.5px;
		line-height: 16.5px;
		margin: 20px 10px;
		display: flex;
		position: relative;
		justify-content: center;
	}

	.bottom-text-m {
		text-align: center;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		width: 164px;
		text-align: center;
		background-color: #FFF;
	}

	.bottom-text-l {
		width: 100%;
		margin-top: 8px;
		height: 1px;
		background: #E0E0E0;
	}

	.show {
		display: block !important;
	}

	.youhui-items-name-spanTwo {
		background-color: #C2C2C2 !important;
	}

	.hide {
		display: none !important;
	}

	.youhui-items-used-img {
		width: 50px;
		height: 56.5px;
		position: absolute;
		top: 8;
		right: 0;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.nav-items {
		width: 100%;
		height: 43.5px;
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
	}

	.nav-boxs {
		width: 33.3%;
		text-align: center;
		line-height: 43.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}

	.nav-boxs view {
		position: absolute;
		left: 40px;
		right: 40px;
		height: 1px;
		bottom: 0;
		background: rgba(254, 67, 56, 1);
	}

	.nav-boxs-active {
		font-size: 14px;
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
	}

	.youhui-list {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.youhui-items {
		height: 90px;
		margin: 10px 10px 0 10px;
		display: flex;
		position: relative;
	}

	.youhui-items-l {
		width: 112.5px;
		height: 90px;
		z-index: 300;
		position: relative;
	}

	.youhui-items-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.youhui-items-price {
		width: 100%;
		line-height: 40px;
		padding-top: 13px;
		font-size: 40px;
		font-family: PingFangSC-Semibold, PingFangSC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 600;
	}

	.youhui-items-price a {
		font-size: 20px;
		width: 18px;
		text-align: center;
		line-height: 40px;
	}

	.youhui-items-text {
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 58.5px;
		z-index: 600;
		left: 24.5px;
	}

	.youhui-items-img-down {
		width: 12.5px;
		height: 12.5px;
		position: absolute;
		top: 72px;
		right: 5.5px;
	}

	.youhui-items-r {
		height: 90px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 5px 0px rgba(153, 153, 153, 0.1);
		border: 1px solid rgba(246, 246, 246, 1);
		display: flex;
		position: absolute;
		width: 100%;
	}

	.youhui-items-name {
		height: 40px;
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-right: 18px;
		position: absolute;
		left: 122.5px;
		line-height: 20px;
	}

	.youhui-items-name span {
		width: 92px;
		padding: 0 6.5px;
		margin-right: 10px;
		height: 14px;
		border-radius: 7px;
		line-height: 14px;
		background: rgba(99, 157, 236, 1);
		font-size: 10px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.youhui-items-date {
		position: absolute;
		font-size: 9px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		bottom: 29px;
		left: 122.5px;
	}

	.youhui-no-text {
		position: absolute;
		bottom: -27.5px;
		margin-top: 27.5px;
		line-height: 27.5px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		background: rgba(244, 244, 244, 1);
		padding-left: 10px;
		left: 0;
		right: -2px;
	}

	.youhuiquan-btn {
		height: 35px;
		position: absolute;
		right: 56px;
		left: 56px;
		bottom: 15px;
		background: rgba(254, 67, 56, 1);
		border-radius: 21px;
		text-align: center;
		font-size: 14px;
		line-height: 35px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.youhui-items-use {
		width: 50.45px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		position: absolute;
		right: 9px;
		bottom: 29px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(62, 134, 255, 1);
		background: rgba(255, 255, 255, 1);
		border-radius: 10px;
		border: 1px solid rgba(62, 134, 255, 1);
		padding: 0 5px;
	}

	.youhui-items-detail {
		height: 23px;
		line-height: 23px;
		position: absolute;
		bottom: 0;
		left: 122.5px;
		right: 9px;
		border-top: 1px dashed #EEEEEE;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.youhui-items-detail-infos {
		margin-left: 10px;
		margin-right: 10px;
		height: 30px;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding: 12.5px 10px;
		background: rgba(244, 249, 255, 1);
		box-shadow: 0px 1px 5px 0px rgba(153, 153, 153, 0.1);
		display: none;
	}
</style>
